<template>
  <div>
    <h1>数据维护模块</h1>

    <el-table
        :data="tableRecord"
        border
        style="width: 100%">

      <el-table-column
          prop="recordID"
          label="记录编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="recordName"
          label="记录名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="recordDate"
          label="记录时间">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作">
        <template #default="scope">
          <el-button @click="handleRecover(scope.row)" type="primary" size="small">恢复记录</el-button>
          <el-button @click="handleDelete(scope.row,scope.$index)" type="warning" size="small">删除记录</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新建快照" v-model="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="快照名称" :label-width="100">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addRecord">确 定</el-button>
    </span>
      </template>
    </el-dialog>

    <el-button @click="dialogFormVisible = true" style="margin-top: 30px"
               type="primary" size="small">新增记录</el-button>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";
import {get} from "@/utils/http";

export default {
  name: "dataManage",
  data() {
    return {
      dialogFormVisible: false,
      form:{
        name: null
      },
      tableRecord: [],
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData(){
      let that = this;
      get("/dataManageInfo/getInfo",{

          }).then(function (res) {
        that.tableRecord = res.data;
        console.log(res);
        ElMessage.success({
          showClose: true,
          message: "快照数据获取成功",
          type: "success",
          center: true
        })
      })
    },
    addRecord() {
      let that = this;
      let t = new Date().getTime();
      that.tableRecord.push({
        recordID: "Record"+t,
        recordName: this.form.name,
        recordDate: Date().slice(0, 24),
      });
      get("/dataManageInfo/insert",{
        recordID: "Record"+t,
        recordName: this.form.name,
        recordDate: Date().slice(0, 24),
      }).then(function (res){
        console.log(res)
        if (res.code===1){
          ElMessage.success({
            showClose: true,
            message: "快照"+that.form.name+"已创建成功",
            type: "success",
            center: true
          })
          that.form.name = null;
        }
      })

      this.dialogFormVisible=false;
    },

    handleRecover(row) {
      ElMessage.success({
        showClose: true,
        message: "已恢复至" + row.RecordName,
        type: "success",
        center: true
      })
    },

    handleDelete(row,index) {
      this.tableRecord.splice(index,1);
      get("/dataManageInfo/delete",{
        recordID: row.recordID,
      }).then(function (res){
        if (res.code===1){
          ElMessage.success({
            showClose: true,
            message: "快照"+row.recordName+"已删除",
            type: "success",
            center: true
          })
        }
      })
    },
  }
}
</script>

<style scoped>

</style>